<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            width: 600px;
            height: 800px;
            border: 10px red solid;
            /* 将ul设置为弹性容器 */
            display: flex;
            /* 弹性容器方向 */
            flex-direction: row;
            /* flex-wrap 元素是否在弹性容器中自动换行
                可选值 
                  nowrap 默认值 元素不会自动换行
                  warp 元素沿着辅（侧）轴方向换行
                  wrap-reverse 沿辅轴反方向换行
             */
            /* flex-wrap: nowrap; */

            /* flex-flow  wrap 和 direction的简写 */
            flex-flow: row wrap;

            /* justify-content 
                如何分配主轴上的空白空间 主轴上的元素如何排列
                 可选值
                  flex-start 元素沿着主轴起边排列
                  flex-end 元素沿着主轴终边排列
                  center  元素居中排列
                  space-around 空白分布两侧 中间空白比较多
                  space-evenly 空白分布在单侧 空白均匀
                  space-between  两边不留空白，空白在元素中间
             */
            /* justify-content: flex-start;
            justify-content: flex-end;
            justify-content: center;
            justify-content: space-around;
            justify-content: space-evenly;
            justify-content: space-between; */

            /* align-items 元素在辅轴上如何对齐 元素间的关系 
                可选值
                 默认 stretch  元素长度相同   相同行，长度一样
                 flex-start   元素不拉伸     沿着辅轴起边对齐
                 flex-end     元素不拉伸     沿着辅轴终边对齐
                 center       居中对齐
                 baseline       基线对齐   沿着文字的基线对齐
            */
            align-items: stretch;
            
            align-items: flex-end;
            align-items: center;
            align-items: baseline;
            align-items: flex-start;

            /* align-content  辅轴空白空间 对齐方式
               可选值
                  flex-start 元素沿着辅轴起边排列
                  flex-end 元素沿着辅轴终边排列
                  center  元素居中排列 空白在两边
                  space-around 空白分布两侧 中间空白比较多
                  space-evenly 空白分布在单侧 空白均匀
                  space-between  两边不留空白，空白在元素中间*/
            align-content: space-between;
            /* align-content: center; */
        }

        li{
            width: 200px;
            /* height: 100px; */
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            flex-shrink: 0;
    
        }

        li:nth-child(1){
            /* align-self: 用来覆盖当前弹性元素上的align-item
            */
            align-self: stretch;
        }

        li:nth-child(2){
            background-color: pink;
        }
        li:nth-child(3){
            background-color: orange;
        }
        li:nth-child(4){
            background-color: yellow;
        }
        li:nth-child(5){
            background-color: chocolate;
        }

    </style>
</head>
<body>


    <ul>
        <li>1</li>
        <li>2
            <div>2</div>
        </li>
        <li>3
            <div>3
                <div>3</div>
            </div>
        </li>
        <li>1</li>
        <li>2
            <div>2</div>
        </li>
        
    </ul>
    
</body>
</html>